<template>
    <div class="box">
        <el-card>
            <div class="btn">
                <el-button
                    v-for="(item, i) in roles"
                    :key="i"
                    type="primary"
                    :icon="item.icon"
                    circle
                    @click="btnBox(item.type)"
                ></el-button>
            </div>
            <div class="list">
                <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    style="width: 100%"
                >
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column property="courseName" label="名称">
                    </el-table-column>
                    <el-table-column property="courseCredit" label="学分">
                    </el-table-column>
                    <el-table-column property="courseHour" label="课时">
                    </el-table-column>
                    <el-table-column property="courseStatus" label="状态">
                        <template slot-scope="scope">
                            {{ scope.row.courseStatus | getStatus }}
                        </template>
                    </el-table-column>
                    <el-table-column property="courseDate" label="开课时间">
                        <template slot-scope="scope">
                            {{ scope.row.courseDate | courseDateFun }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <addTeacherInfo
            @show="isShow = false"
            :tracherInfo="tracherInfo"
            :isShow="isShow"
            @refreshBox="getCourseList"
        >
        </addTeacherInfo>
    </div>
</template>

<script>
import { getTeacherList, delTeacherInfo } from "../../api/user";
import { getCourseList } from "../../api/courseApi";
// getScoreList
import addTeacherInfo from "../../components/user/addTeacherInfo.vue";

export default {
    data() {
        return {
            roles: [
                { type: "add", icon: "el-icon-plus" },
                { type: "update", icon: "el-icon-edit-outline" },
                { type: "del", icon: "el-icon-minus" },
            ],
            tableData: [],
            currentRow: null,
            tracherInfo: null,
            isShow: false,
        };
    },
    components: {
        addTeacherInfo,
    },

    created() {
        // this.list  =  this.list.map(i=>i.setData={isChecked:false,showAgree:false})
        this.getCourseList();
    },

    methods: {
        btnBox(t) {
            switch (t) {
                case "add":
                    this.isShow = true;
                    this.tracherInfo = null;
                    return;
                case "update":
                    if (this.currentRow != null) {
                        this.isShow = true;
                        this.tracherInfo = JSON.parse(
                            JSON.stringify(this.currentRow)
                        );
                    } else {
                        this.$message("请选中数据");
                    }
                    return;
                case "del":
                    if (this.currentRow.id == undefined) {
                        this.$message({
                            type: "info",
                            message: "按钮不可删除",
                        });
                        return;
                    }
                    if (this.currentRow != null) {
                        this.$confirm(
                            "此操作将永久删除该数据, 是否继续?",
                            "提示",
                            {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            }
                        )
                            .then(() => {
                                const loading = this.$loading({
                                    lock: true,
                                    text: "Loading",
                                    spinner: "el-icon-loading",
                                    background: "rgba(0, 0, 0, 0.7)",
                                });
                                delTeacherInfo(this.currentRow.id).then(
                                    (res) => {
                                        loading.close();
                                        console.log("del", res);
                                        this.$message({
                                            type: "success",
                                            message: "删除成功!",
                                        });
                                    }
                                );
                            })
                            .catch(() => {
                                this.$message({
                                    type: "info",
                                    message: "已取消删除",
                                });
                            });
                    } else {
                        this.$message("请选中数据");
                    }
                    return;
            }
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        getCourseList() {
            getCourseList().then((res) => {
                this.tableData = res.data.list;
            });
        },
    },
    computed: {},
    filters: {
        getStatus(n) {
            if (n == 0) return "关闭";
            else return "开启";
        },
        courseDateFun(n) {
            switch (n) {
                case "1":
                    return "大一上";
                case "2":
                    return "大一下";
                case "3":
                    return "大二上";
                case "4":
                    return "大二下";
                case "5":
                    return "大三上";
                case "6":
                    return "大三下";
                case "7":
                    return "大四上";
                case "8":
                    return "大四下";
            }
        },
    },
};
</script>

<style lang="scss" scope>
.box {
    text-align: left;
    margin: 20px 0;
    flex: 1;

    .el-card {
        height: 100%;
    }
}
</style>